<script setup lang="ts">
import {ref, onMounted} from 'vue'
import {login, captchaImage} from '@/api/user.ts'

import store from 'store'
// import {useSystem} from "@/stores/system/index"
// const storeSystem = useSystem()

import {useRouter} from 'vue-router'
const router = useRouter()
import {ry_addRouter} from '@/router/index.ts'

import {getToday} from '@/common/time.ts'
let form:any = ref({
    username: "admin",
    password: "admin888",
    loginStatus: false,
    code:"",
    uuid:""
})
let yzmImage:any = ref()
import config from '@/config.ts'

let websiteConfig:any = config
//获取验证码
async function getCodeImg(){
    let yzm:any = await captchaImage()
    yzmImage.value = yzm.data.data
    form.value.uuid = yzm.data.uuid
}
onMounted(async ()=>{
    await getCodeImg()
})
//获取当前日期
let today:any = ref(getToday())

//登陆
function toLogin() {
    login(form.value)
    .then(async (res:any)=>{
        store.set('token', res.data.token)
        // //获取用户信息
        store.set('permissions', res.data.permissions)
        store.set('roles', res.data.roles)
        store.set('user', res.data.user)
        // //获取路由信息
        await ry_addRouter()
        //页面跳转
        await router.push({path: '/home/console'})
    })
    .catch((err) => {
        // @ts-ignore
        tell.log(err)
        form.value.code = ''
        getCodeImg()
    })
    
}
</script>

<template>
    <div id="body" class="wos-flex wos-flex-row wos-flex-between">
        <div id="left" class="bd">
            <div id="left-content" class="wos-flex wos-flex-column wos-flex-between">
                <div>
                    <img id="logo" class="animate__animated animate__flipInX" src="/assets/images/login-logo.png" alt="Login">
                    <div id="left-content-title">
                        <div id="title-1">{{websiteConfig['webTitle']}}</div>
                        <div id="title-2">{{websiteConfig['subtitle']}}</div>
                        <div id="title-3">{{websiteConfig['introduce']}}</div>
                    </div>
                </div>
                <div>
                    <img src="/assets/images/login-icon-1.svg" alt="">
                </div>
            </div>
        </div>
        <div id="right" class="bd ">
            <div id="right-content">
                <div id="logo" class="wos-flex wos-flex-center">
                    <img src="/assets/images/logo.svg" alt="logo">
                </div>
                <div class="tip wos-flex wos-flex-center wos-color wos-font-sm">
                    {{today}} 欢迎登陆
                </div>
                <div class="input-username">
                    <div class="wos-font-sm input-tip">用户名</div>
                    <div class="input wos-flex wos-flex-row">
                        <div>
                            <img src="/assets/icon/user-input.svg"  alt="Logo">
                        </div>
                        <div class="wos-flex-auto">
                            <input type="text" placeholder="请输入用户名或电子邮件" v-model="form.username">
                        </div>
                    </div>
                </div>
                <div class="input-password">
                    <div class="wos-font-sm input-tip">密码</div>
                    <div class="input wos-flex wos-flex-row">
                        <div>
                            <img src="/assets/icon/password-input.svg" alt="">
                        </div>
                        <div class="wos-flex-auto">
                            <input type="password" placeholder="请输入密码" v-model="form.password">
                        </div>
                    </div>
                </div>
                <div class="input-password">
                    <div class="wos-font-sm input-tip">验证码</div>
                    <div class="input wos-flex wos-flex-row">
                        <div>
                            <img src="/assets/icon/yzm-input.svg" alt="">
                        </div>
                        <div class="wos-flex-auto">
                            <input placeholder="请输入右侧验证码" v-model="form.code" @keyup.enter="toLogin">
                        </div>
                        <div>
                          <div class="yzm animate__animated animate__flipInX" @click="getCodeImg" v-html="yzmImage"></div>
                        </div>
                    </div>
                </div>

                <div class="input-mask wos-flex wos-flex-row wos-flex-between">
                    <div>
                        <input type="checkbox" id="remember" v-model="form.loginStatus">
                        <label for="remember" class="wos-font-sm">&nbsp;记住我(免登录)</label>
                    </div>
                    <div class="wos-font-sm wos-color-blue wos-hand">
                        忘记密码
                    </div>
                </div>
                <div @click="toLogin" class="wos-default-btn wos-hand">登陆</div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
#body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;

  .bd {
    width: 50vw;
    height: 100vh;
    display: flex;
    align-items: center;
  }

  #left {
    background-color: rgba(92, 125, 242, 1);
    justify-content: right;

    #left-content {
      width: 650px;
      height: 800px;
      background-color: rgba(99, 131, 250, 1);
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
      background-image: url("/assets/images/login-icon-2.svg");
      background-position: right bottom;
      background-repeat: no-repeat;
      padding: 60px;
      color: #FFFFFF;

      #logo {
        width: 188px;
        height: 188px;
      }

      #left-content-title {
        margin-top: 30px
      }

      #title-1 {
        font-size: 32px;
      }

      #title-2 {
        font-size: 50px;
      }

      #title-3 {
        font-size: 16px;
        line-height: 26px;
      }
    }
  }

  #right {
    background-color: rgba(191, 201, 221, 0.7);
    justify-content: left;

    #right-content {
      width: 650px;
      height: 800px;
      background-color: rgba(245, 246, 250, 1);
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
      padding:55px 120px 85px 120px;
        #logo{
            width: 100%;
            text-align: center;
            height: 130px;
        }
        .tip{
            text-align: center;
            margin-left: 30px;
        }
        .input-username{
            margin-top: 32px;
        }
        .input-password{
            margin: 16px 0 16px 0;
        }
        .input-mask{
            margin-bottom: 16px;
        }

        .input-tip{
          color:#000000
        }
        .input{
            background-color: #FFFFFF;
            margin-top:10px;
            padding:18px;
            border-radius: 6px;
            input{
                border:0;
                margin-left: 10px;
                width: 100%;
                font-size: 16px;
            }
            input:focus {
                outline: none;
            }
            .yzm{
                position: absolute;
                margin: -20px 0 0 -120px;
              cursor: pointer;
            }
        }
    }
  }
}
</style>